<template>
  <div>
    <el-form :model="formItem" label-width="100px" size="mini" class="form-view">
      <el-form-item label="卡片编号：">
        {{ formItem.code }}
      </el-form-item>
      <el-form-item label="财管资产数量：">
        {{ formItem.amount }}
      </el-form-item>
      <el-form-item label="说明：">
        {{ formItem.description }}
      </el-form-item>
      <el-form-item label="资产：">
        <el-table
          :loading="false"
          :data="formItem.assets"
          class="fixed-table-table"
        >
          <el-table-column v-for="column in insideColumns" :key="column.key" :label="column.title" :prop="column.key" :sortable="column.sortable">
            <template slot-scope="scope">
              <column-render :render="column.render" :row="scope.row" :column="column" />
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {
  detail
} from '@neu/dcam-ui/api/ahassetcard'
// 定义一个表单原始项
const formItem = {
  code: '',
  amount: 0,
  description: '',
  assets: []
}
export default {
  name: 'AhAssetCardViewForm',
  props: {
    // 根据id可判断是新建还是更新
    id: {
      required: false,
      type: Number,
      default: -1
    }
  },
  data() {
    return {
      // 查看的表单内容
      formItem: {
        ...formItem
      },
      insideColumns: [
        { title: '资产编号', width: 100, key: 'code' },
        { title: '大分类', width: 100, key: 'bigTypeName' },
        { title: '中分类', width: 100, key: 'middleTypeName' },
        { title: '小分类', width: 100, key: 'smallTypeName' },
        { title: '规格型号', width: 100, key: 'specifications' }
      ]
    }
  },
  watch: {
    id: {
      handler(newVal, oldVal) {
        this.fetch()
      },
      immediate: true
    }
  },
  methods: {
    // 初始化表单数据
    fetch() {
      if (this.id !== -1) {
        detail(this.id).then(response => {
          this.formItem = {
            ...response.data
          }
        })
      } else {
        this.formItem = {
          ...formItem
        }
      }
    }
  }
}
</script>
